<fieldset class="layui-elem-field layui-field-title">
  <legend>添加商品</legend>
</fieldset>

<style>
	#demo2 img{
		width: 92px;
		height: 92px;
	}
	#demo2 span{
		position: relative;
	}
	#demo2 span:hover::after{
		content: "X";
		display: block;
		background-color: #FF5722;
		width: 16px;
		height: 16px;
		border-radius: 16px;
		line-height: 16px;
		position: absolute;
		color: #fff;
		text-align: center;
		top: -46px;
		right: 0px;
	}
</style>

<form class="layui-form">
	
	<div class="layui-form-item">
		<label class="layui-form-label">商品名称</label>
		<div class="layui-input-inline">
			<input type="text" name="name" class="layui-input" placeholder="请输入商品名" />
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label">一级分类</label>
		<div class="layui-input-inline">
			<select name="parent" lay-filter="parent"></select>
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label">二级分类</label>
		<div class="layui-input-inline">
			<select name="goodsSortId"></select>
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label">描述信息</label>
		<div class="layui-input-inline">
			<textarea  name="dscp" class="layui-textarea" layui-tplaceholder="请输入描述信息"></textarea>
		</div>
	 </div>
	
	<div class="layui-form-item">
		<label class="layui-form-label">商品价格</label>
		<div class="layui-input-inline">
			<input type="number" name="price" class="layui-input" placeholder="请输入商品价格" />
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label">版本信息</label>
		<div class="layui-input-inline">
			<input type="text" name="version" class="layui-input" placeholder="请输入版本信息" />
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label">商品颜色</label>
		<div class="layui-input-inline">
			<input type="text" name="color" class="layui-input" placeholder="请输入商品颜色" />
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label">商品套餐</label>
		<div class="layui-input-inline">
			<input type="text" name="suit" class="layui-input" placeholder="请输入商品套餐" />
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label">商品数量</label>
		<div class="layui-input-inline">
			<input type="number" name="count" class="layui-input" placeholder="请输入商品数量" />
		</div>
	</div>
	
	
	<div class="layui-form-item">
		<input type="hidden" name="pig" />
		<label class="layui-form-label">商品图片</label>
		<div class="layui-input-inline">
			<div class="layui-upload">
			  <button type="button" class="layui-btn" id="test2">图片上传</button> 
			  <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
			    预览图：
			    <div class="layui-upload-list" id="demo2"></div>
			 </blockquote>
			</div>
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label"></label>
		<div class="layui-input-inline">
			<button type="submit" class="layui-btn layui-btn-danger" lay-submit lay-filter="add">添加商品</button>
		</div>
	</div>
	
</form>
<script type="text/javascript">

	layui.use(['form','upload','element'],function(){
		var form=layui.form;
		var upload = layui.upload;
		var element=layui.element;
		
		//获取当前的token
		var token =getCookie("token");
		
		//获取一级分类
		$.ajax({
			url:'http://127.0.0.1:8888/api/goodsSorts',
			type:'get',
			data:{},
			dataType:'json',
			success:function(data){
				if( data.status == 200){
					var html="<option value=''>请选择一级分类</option>"
					
					$.each(data.data.list,function(index,item){
						html+="<option value='"+item.id+"'>"+item.name+"</option>"
					})
					
					$("select[name='parent']").html(html);
					form.render();
					
				}else {
					
					layer.alert(data.msg,function(){
						window.location.href="login.html";
					});
					
				}
				
			},
			error:function(){
				
			}
		});
		
		form.on('select(parent)', function(data) {
					//获取点击的一级分类
			var parent = data.value;

				//获取分类
				if(parent >0){
				$.ajax({
					url: 'http://127.0.0.1:8888/api/goodsSorts',
					type: 'get',
					data: {
						parent: parent
					},
					dataType: 'json',
					success: function(data) {
						if (data.status == 200) {
							var html = "<option value=''>请选择二级分类</option>";
							$.each(data.data.list, function(index, item) {
								html += "<option value='" + item.id + "'>" + item
									.name + "</option>";
							});
							$("select[name='goodsSortId']").html(html);
							// 渲染表单
							form.render();
						} else {
							layer.alert(data.msg);
						}
					},
					error: function() {

					}



				});
			} else {
				$("select[name='goodsSortId']").html("<option value=''>请选择二级分类</option>");
				// 渲染表单
				form.render();
			}
		});
		
		
		//多图片上传
		  upload.render({
		    elem: '#test2'
		    ,url: 'http://127.0.0.1:8888/api/upload' //此处配置你自己的上传接口即可
		    ,multiple: true
		    ,done: function(res){
		      //上传完毕 每上传一张图片，都会相应一次
				$('#demo2').append('<span><img src="http://127.0.0.1:8888/upload/'+ res.data +'" class="layui-upload-img">'+
									'<input type="hidden" name="pictures" value="'+res.data+'"></scan>')
				
		    }
		  });
		 
		 //添加图片的点击事件
		 $("#demo2").on("click","span",function(){
			$(this).remove();
			 });
		
		
		//表单提交
		form.on('submit(add)',function(data){
			
			// 获取所有的图片，组成一个数组
			var pictures = [];
			$("input[name='pictures']").each(function(){
				pictures.push({name:$(this).val()});
			})
			// 将数组放到data.field中
			data.field.pictures = pictures;
			
			// 获取被选中的复选框
			var name = $("input[name='pig']").val();
			goodsPicturre=({name:name})
			data.field.goodsPicturre = goodsPicturre;
			
			$.ajax({
				url:'http://127.0.0.1:8888/api/goods',
				type:'post',
				data: JSON.stringify(data.field),
				contentType: 'application/json; charset=utf-8',
				dataType: 'json',
				success:function(data){
					if (data.status==201){
						gotoUrl("goods/list.html");
					}else{
						layer.msg(data.msg);
					}
				},
				error: function(){
				}
			});
			
			return false;
		});
	});
</script>